<template>
  <el-dialog title="修改密码" v-model="shade.show" center width="500px">
    <div class="s-ChangeWordShade">
      <el-form ref="ruleFormRef" :model="form" :rules="rules" label-width="110px">
        <el-form-item label="姓名:" prop="userName">
          <el-input v-model="form.userName"></el-input>
        </el-form-item>
        <el-form-item label="旧密码:" prop="OldPassword">
          <el-input type="password" v-model="form.OldPassword"></el-input>
        </el-form-item>
        <el-form-item label="新密码:" prop="NewPassword">
          <el-input type="password" v-model="form.NewPassword"></el-input>
        </el-form-item>
        <el-form-item label="再次确认密码:" prop="NewPasswordAgain">
          <el-input type="password" v-model="form.NewPasswordAgain"></el-input>
        </el-form-item>
        <el-form-item class="login-sub-content">
          <el-button type="primary" @click="changeWordSubmin(ruleFormRef)">确认修改</el-button>
        </el-form-item>
      </el-form>
    </div>
  </el-dialog>
</template>
<script setup>
import { ref, reactive, toRef, inject } from "vue";
import { ElMessage } from "element-plus";
const http = inject("ajax");

let props = defineProps({
  shadeObjWord: {
    type: Object,
    default() {
      return {
        show: false,
      };
    },
  },
});
const shade = toRef(props, "shadeObjWord"); //变成响应式的数据
const ruleFormRef = ref();
let form = reactive({
  userName: "",
});
// 密码
const ToPassword = (rule, value, callback) => {
  if (value === "") {
    callback(new Error("密码不能为空"));
  } else if (!/^(?=.*[0-9])(?=.*[A-Z])(?=.*[a-z])(.{8,20})$/.test(value)) {
    callback(new Error("密码设置8到20位,必须包含大写字母、小写字母、数字"));
  } else {
    callback();
  }
};
// 确认密码
const equalToPassword = (rule, value, callback) => {
  if (form.NewPassword !== value) {
    callback(new Error("两次输入的密码不一致"));
  } else {
    callback();
  }
};
const rules = reactive({
  userName: [
    { required: true, message: "请输入账号", trigger: "blur" },
    { min: 3, max: 10, message: "长度在 3 到 10 个字符", trigger: "blur" },
  ],
  OldPassword: [{ required: true, message: "请输入旧密码", trigger: "blur" }],
  NewPassword: [
    { required: true, message: "请输入新密码", trigger: "blur" },
    { required: true, validator: ToPassword, trigger: "blur" },
  ],
  NewPasswordAgain: [
    { required: true, message: "确认密码不能为空", trigger: "blur" },
    { required: true, validator: equalToPassword, trigger: "blur" },
  ],
});
const changeWordSubmin = async formEl => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      // console.log(form);
      sendWord(formEl);
    } else {
      console.log("error submit!", fields);
    }
  });
};
const sendWord = formEl => {
  http("/iaiqsmde9fea569965ed56ab98ea0501752fe631902841e/changeWord", form, "post")
    .then(res => {
      let { code, data } = res;

      if (code == 0) {
        formEl.resetFields();
        shade.value.show = false;
        ElMessage({
          message: data || "修改成功",
          type: "success",
        });
      }
    })
    .catch(err => {
      console.log(err.message || "数据异常");
    });
};
</script>
